<template>
    <div class="rank">

        <TopSearch></TopSearch>

        <!-- 标题栏 -->
        <view class="title-tab" hover-class="none" hover-stop-propagation="false">
            <van-tabs sticky title-active-color="#555560" title-inactive-color="#adadb5" color="red" line-width="20px"
                @click-tab="onClickTab" title-class="title-tab">
                <van-tab :title="item.name" v-for="(item, index) in rankList" :key="item.id" :name="index">
                </van-tab>
            </van-tabs>
        </view>

        <div class="banner">
            <!-- 左侧导航栏 -->
            <div class="menu_list">
                <van-sidebar v-model="tabValue" scrollspy @change="bannerChange">
                    <van-sidebar-item :title="item.name" v-for="(item, index) in bannerList " :key="index" />
                </van-sidebar>
            </div>
            <!-- 右侧内容栏 -->
            <div class="goodList">
                <div class="goodList-item">

                    <div class="goods" v-for="(item, index) in goodsList" :key="index" @click="toAlbum(item.id)">
                        <div v-if="index < 3" :class="{ num1: index === 0, num2: index === 1, num3: index === 2 }">
                        </div>
                        <div v-else class="num">{{ index + 1 }}
                        </div>
                        <div class="item">
                            <img :src="`//imagev2.xmcdn.com/${item.cover}`" class="img">
                            <div class="content">
                                <div class="title">{{ item.albumTitle }}</div>
                                <div class="neirong">{{ item.salePoint }}</div>
                                <div class="sum">
                                    <span class="number">
                                        ▷{{ (item.playCount / 100000000).toFixed(2) }}亿
                                    </span>
                                    <span class="">
                                        <svg t="1694740463714" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="8758" width="16" height="12">
                                            <path
                                                d="M512 128a32 32 0 0 1 32 32v704a32 32 0 1 1-64 0v-704A32 32 0 0 1 512 128zM320 256a32 32 0 0 1 32 32v448a32 32 0 1 1-64 0v-448A32 32 0 0 1 320 256z m384 0a32 32 0 0 1 32 32v448a32 32 0 1 1-64 0v-448A32 32 0 0 1 704 256z m192 128a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0v-192A32 32 0 0 1 896 384zM128 384a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0v-192A32 32 0 0 1 128 384z"
                                                fill="#999" p-id="8759"></path>
                                        </svg>
                                        <span>{{ item.trackCount }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>



            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import RankPi from '@/api/Rank.ts'
import { useRouter } from 'vue-router'
const router = useRouter()


const tabValue = ref(0)
const bannerIndex = ref(0)
const bannerList = ref()
const rankList = ref<any>([])
const goodsList = ref()


//跳转商品详情
const toAlbum = (id: number) => {
    router.push({
        name: 'Album',
        params: {
            id
        }
    })
}

const getRankList = async () => {
    let res: any = await RankPi.getList(1)
    // console.log(res);
    rankList.value = res.tabLists
    bannerList.value = rankList.value[bannerIndex.value].tabWraps
    let resGoods = await RankPi.getItem(100006)
    goodsList.value = resGoods.rankList[0].albums.slice(0, 20)

}
const bannerChange = async (index: any) => {

    // console.log(bannerList.value[index].rankingId)
    const id = bannerList.value[index].rankingId
    let resGoods = await RankPi.getItem(id)
    goodsList.value = resGoods.rankList[0].albums.slice(0, 20)
}
const onClickTab = async (name: any) => {

    tabValue.value = 0
    bannerIndex.value = name.name
    bannerList.value = rankList.value[bannerIndex.value].tabWraps
    const id = bannerList.value[0].rankingId
    let resGoods = await RankPi.getItem(id)
    goodsList.value = resGoods.rankList[0].albums.slice(0, 20)

}
onMounted(() => {
    getRankList()
})



</script>

<style scoped lang="scss">
.van-sidebar-item--select:before {
    height: 100%;
    background-color: red;
    color: #72727b;
}


::v-deep(.van-tab--active) {
    font-size: 20px;
}


.rank {

    position: fixed;
    height: 100%;

    .title-tab {
        position: fixed;
        // position: absolute;
        top: 46px;
        z-index: 2;

    }

    .banner {
        display: flex;
        width: 100%;
        margin-top: 42px;
        height: 100%;

        .menu_list {
            position: fixed;
            height: 620px;
            overflow: scroll;
        }

        .goodList {
            margin: 0;
            padding: 0;
            width: 79%;
            padding-left: 97.5px;
            height: 85%;
            overflow: scroll;

            .goods {
                display: flex;
                background-color: #fff;

                .num {
                    width: 19px;
                    height: 50px;
                    margin-right: 10px;
                    font-size: 16px;
                    padding-top: 15px;
                    padding-left: 5px;
                    font-weight: bold;
                    text-align: center;
                }

                .num1 {
                    // margin: 18px 0;
                    width: 19px;
                    height: 50px;
                    margin-right: 10px;
                    background-image: url(//s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_first_4dd5bad.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                }

                .num2 {
                    // margin: 18px 0;
                    width: 19px;
                    height: 50px;
                    margin-right: 10px;
                    background-image: url(https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_second_977bd19.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                }

                .num3 {
                    // margin: 18px 0;
                    width: 19px;
                    height: 50px;
                    margin-right: 10px;
                    background-image: url(https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_third_1a96b0c.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    background-position: center;
                }

                .item {
                    // background-color: #1bc841;
                    background-color: #fff;
                    border-bottom: 1px solid #f8f8f8;
                    width: 100%;
                    padding: 15px 10px 15px 0px;
                    display: flex;

                    // width: auto;
                    .img {
                        // width: 85px;
                        height: 70px;
                        display: block;
                        margin-right: 15px;
                        border-radius: 5px;
                    }

                    .content {

                        .title {

                            font-size: 15px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }

                        .neirong {
                            color: #ababab;
                            font-size: 13px;
                            margin: 5px 0 7px;
                        }

                        .sum {
                            font-size: 11px;
                            color: #999999;
                            line-height: 1.45;
                            white-space: nowrap;
                            // display: flex;

                            .icon {
                                // padding-top: px;
                                // display: block;
                                margin-right: 5px;
                            }

                            .number {
                                margin-right: 10px;
                            }
                        }
                    }
                }
            }


            // margin-top: 44px;

        }
    }

}</style>